<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
    <title>PG GAME</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/svgaplayerweb@2.3.1/build/svga.min.js"></script>
<style>
    body {
        margin: 0;
        padding: 0;
        background-color: #000;
        overflow: hidden;
    }

    #iframe {
        min-height: 0 !important;
        padding-top: 0;
        position: relative;
        z-index: 0;

    }

    #demoCanvas {
        height: 100%;
        width: 100%;
        display: block;
    }

    #iframe {
        height: 100%;
        width: 100%;
        border: none;
        transition: width 0.3s ease, height 0.3s ease;
        display: none;
    }

    .block {
        padding: 1em;
        background-color: pink;
        touch-action: none;
        transform: translate(0px, 0px);
        position: absolute;
        right: 0;
        z-index: 2;
    }
</style>


<body>
    <div id="body">
        <div class="draggable block" onclick="back()">X</div>
        <div id="demoCanvas"></div>
        <iframe id="iframe" src="" frameborder="0"></iframe>
    </div>


</body>
<script src="./file/interact.js"></script>
<script src="./file/draggable.js"></script>

<!-- <script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script> -->
<script>
    // var vConsole = new VConsole();
    let body = document.getElementById('body')

    body.style.width = window.visualViewport.width + 'px'
    body.style.height = window.visualViewport.height + 'px';

    function getQueryParams(url) {
        const paramArr = url.slice(url.indexOf("?") + 1).split("&");
        const params = {};
        paramArr.map((param) => {
            const [key, val] = param.split("=");
            params[key] = decodeURIComponent(val);
        });
        return params;
    }

    const queryParams = getQueryParams(location.href)
    let lang = 'vn'
    if (queryParams.lang) {
        lang = queryParams.lang
    }
    var player = new SVGA.Player('#demoCanvas');
    var parser = new SVGA.Parser('#demoCanvas');
    parser.load(`./file/${lang}.svga`, function (videoItem) {
        player.setVideoItem(videoItem);
        player.startAnimation();
    })

    window.addEventListener('message', (e) => {
        if (e.data.gameUrl) {
            let url = e.data.gameUrl
            if (e.data.gameUrl.indexOf('<!doctype html>') != -1) {
                let newPage = window.open('', '_blank')
                newPage.document.open()
                newPage.document.write(e.data.gameUrl)
                newPage.document.close()
                setTimeout(() => {
                    window.close();
                }, 10);
                // const blob = new Blob([e.data.gameUrl], { type: 'text/html' });
                // url = URL.createObjectURL(blob);
            }
            document.getElementById("iframe").src = url
            document.getElementById('demoCanvas').style.display = 'none'
            document.getElementById('iframe').style.display = 'block'
            // const iframe = document.querySelector('iframe');
            // var a = 1
            // iframe.onload = function () {
            //     a++
            //     if (a > 4) {
            //         back();
            //     }
            // };
        }
    });




    function back() {
        window.close();
    }

    // 处理屏幕旋转和窗口大小调整
    function adjustIframeSize() {
        let body = document.getElementById('body')
        // 获取窗口宽高
        const width = window.visualViewport.width + 'px';
        const height = window.visualViewport.height + 'px'
        console.log('width==>', width);
        console.log('height==>', height);
        body.style.width = width;
        body.style.height = height;
    }


    // 监听窗口大小变化（包括方向变化）
    window.addEventListener('resize', adjustIframeSize);
    adjustIframeSize()

</script>


</html>